<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>预定房间管理</title>
    <meta name="renderear" content="webkit">
    <meta http-equiv="X-UA-Compatible" coantent="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="inRoom">入住</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="outRoom">取消入住</a>
</script>

<script src="../static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['form','table'] , function(){
        const table = layui.table;
        form = layui.form;
        form.render();

        //查询一共多少数据
        var count = 100;
        page();
        function page(){
            $.ajax({
                url: '/manage/getBookCount',//将值赋值给count
                dataType: 'json',
                type: 'get',
                async:false,
                success: function(data){
                    count = data;
                }
            });
        }

        table.render({
            elem: '#test'
            ,url:'/manage/findBookAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '预定房间数据表'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'name', width:80, title: '姓名'}
                    ,{field:'password', width:100, title: '密码'}
                    ,{field:'phone', width:140, title: '手机号'}
                    ,{field:'idcard', width:150, title: '身份证号'}
                    ,{field:'roomnum', width:80, title: '房间号'}
                    ,{field:'status', width:100, title: '房间状态'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]
            ]
            ,page: true
            ,limit: 5 //每页展示多少条数据
            ,response:{
                statusName: 'status' //规定数据状态的字段名称，默认：code
                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,parseData: function(item){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "status": 0,   //解析接口状态
                    "message":"成功",  //解析提示文本
                    "count": count,       //解析数据长度
                    "rows": item  //解析数据列表
                };
            }
        });

        //监听行工具事件（入住 or 取消入住）
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'inRoom'){
                layer.confirm('确定入住吗', function(index){
                    inRoomById(data.id);
                    layer.close(index);
                });
            } else if(obj.event === 'outRoom') {
                layer.confirm('确定取消入住吗', function (index) {
                    outRoomById(data.id);
                    layer.close(index);
                });
            }
        });

        //入住
        function inRoomById(id){
            $.ajax({
                type:"post",
                url:"/manage/inRoom",
                data:{"id":id},
                success: function(data){
                    //刷新页面
                    // table.reload('test', {
                    //     url: '/manage/findBookAll'
                    // });
                    window.location.reload();
                }
            })
        }

        //取消入住
        function outRoomById(id){
            $.ajax({
                type:"post",
                url:"/manage/outRoom",
                data:{"id":id},
                success: function(data){
                    //刷新页面
                    // table.reload('test', {
                    //     url: '/manage/findBookAll'
                    // });
                    window.location.reload();
                }
            })
        }
    });
</script>
</body>
</html>